<template>
  <div>
    <el-select style="width: 150px; margin: 5px" @change="fieldChange"
               value-key="id" v-model="_value.field" placeholder="选择表单字段">
      <el-option :key="item.id" v-for="item in _formItems" :value="item.id" :label="item.title"></el-option>
    </el-select>
    <template v-if="_value.field">
      <el-select style="width: 110px; margin: 5px" v-model="_value.compare" placeholder="选择比较关系">
        <el-option :key="cp.symbol" v-for="cp in condition.options" :value="cp.symbol" :label="cp.name"/>
      </el-select>
      <el-radio-group v-model="_value.fixed" @change="_value.compareVal = []">
        <el-radio-button :label="true">固定</el-radio-button>
        <el-radio-button :label="false">动态</el-radio-button>
      </el-radio-group>
      <component style="width: calc(100% - 410px); margin-left: 5px" v-if="_value.fixed" :is="condition.name" v-model="_value"/>
      <el-select v-else style="width: 150px; margin: 5px"
                 value-key="id" v-model="_value.compareVal[0]" placeholder="选择表单字段">
        <el-option :key="item.id" v-for="item in _formItems" :value="item.id" :label="item.title"></el-option>
      </el-select>
    </template>

  </div>
</template>

<script>
import compareOptions from "/@/views/setting/workflow/components/compare/CompareOptions";
import StrCompare from "/@/views/setting/workflow/components/compare/StrCompare.vue";
import NumCompare from "/@/views/setting/workflow/components/compare/NumCompare.vue";
import OrgCompare from "/@/views/setting/workflow/components/compare/OrgCompare.vue";
import TimeArrCompare from "/@/views/setting/workflow/components/compare/TimeArrCompare.vue";
import StrArrCompare from "/@/views/setting/workflow/components/compare/StrArrCompare.vue";
import TimeCompare from "/@/views/setting/workflow/components/compare/TimeCompare.vue";
import { computed, reactive, toRefs } from 'vue';
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'

export default {
  name: "ConditionItem",
  components: {
    compareOptions,
    StrCompare,
    NumCompare,
    OrgCompare,
    TimeArrCompare,
    StrArrCompare,
    TimeCompare
  },
  props:{
    formItems:{
      type: Array,
      require: true,
      default: () => {
        return []
      }
    },
    modelValue:{
      type: Object,
      require: true,
      default: () => {
        return {}
      }
    }
  },
  setup(props, context) {
    const { formItems, modelValue } = toRefs(props)
    const storesWorkFlowConfig = useWorkFlowConfig()
    const workFlowConfig = storeToRefs(storesWorkFlowConfig)
    const state = reactive({
        compareOptions
    })
    const formItemMap = computed(() => {
        return workFlowConfig.formItemMap
    })
    const _formItems = computed(() => {
        //过滤不支持的组件
        const ft = [
            'FileUpload', 'ImageUpload', 'ProcessIndex',
            'SignPanel', 'TableList', 'WebIframe', 'TimePicker', 'TableList',
            'TimeRangePicker', 'Description', 'VueContainer'
        ]
        const unsuport = []
        return formItems.value.filter(item => {
            if (item.name === 'TableList'){
            //过滤明细表里面的列字段，目前不支持列合计判断
            item.columns.forEach(col => unsuport.push(col.id))
            }
            return !ft.includes(item.name)
        }).filter(item => !unsuport.includes(item.id))
    })
    const _value = computed({
        get: () => {
            return modelValue.value
        },
        set: val => {
            context.emit('input', val)
        }
    })
    const condition = computed(() => {
        switch (_value.value.fieldType){
            case 'AmountInput':
            case 'NumberInput':
            case 'Score':
            case 'CalcFormula':
                return {name: 'numCompare', options: state.compareOptions.numCompareOptions}
            case 'TextInput':
            case 'TextareaInput':
            case 'SelectInput':
                return {name: 'strCompare', options: state.compareOptions.strCompareOptions}
            case 'MultipleSelect':
                return {name: 'strArrCompare', options: state.compareOptions.strArrCompareOptions}
            case 'DateTime':
                return {name: 'timeCompare', options: state.compareOptions.timeCompareOptions}
            case 'DateTimeRange':
                return {name: 'timeArrCompare', options: state.compareOptions.timeArrCompareOptions}
            case 'DeptPicker':
            case 'UserPicker':
                return {name: 'orgCompare', options: state.compareOptions.orgCompareOptions}
            default: return {name: 'div', options: []}
        }
    })
    const fieldChange = () => {
        _value.value.compare = null;
        _value.value.compareVal = [];
        _value.value.fieldType = formItemMap.value.get(_value.value.field).name
    }
    return {
        ...toRefs(state),
        formItemMap,
        _formItems,
        _value,
        condition,
        fieldChange
    }
  }
}
</script>

<style>

</style>